<template>
	<view class="supList animate__animated animate__bounceInRight">
		<image lazy-load :src="itemData.url" class="supList-image" mode=""></image>
		<view class="supList-cont">
			<text class="commodity-title">{{itemData.showName}}</text>
			<!-- 价格 -->
			<view class="price-c">
				<text class="price-number">{{itemData.price}}€</text>
				<NumberInput small :value="itemData.num" :itemIndex="itemIndex" :itemvalue='itemData'
					@change="cartCountChange($event)" v-on="$listeners"  :max="1"/>
			</view>
		</view>

	</view>
</template>

<script>
	import NumberInput from '@/components/NumberInput';
	export default {
		name: "soupList",
		components: {
			NumberInput
		},
		props: {
			itemData: Object,
			itemIndex: Number
		},
		data() {
			return {

			};
		},
		methods: {
			cartCountChange(count) {
				console.log('cartCountChange', this.itemData)
				this.$emit('SelectTheSoupBase')


			}
		}
	}
</script>

<style lang="scss" scoped>
	.supList {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 32px;

		.supList-image {
			width: 120px;
			height: 120px;
			border-radius: 50%;
		}

		.supList-cont {
			display: flex;
			flex: 1;
			height: 120px;
			// background-color: red;
			margin-left: 17px;
			flex-direction: column;
			justify-content: center;

			.commodity-title {
				font-size: 22px;
				color: $uni-text-color;
			}

			.price-number {
				display: flex;
				flex: 1;
			}

			.price-c {
				margin-top: 14px;
				display: flex;
				font-size: 20px;
				color: $uni-text-color;
			}
		}
	}
</style>